<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卓越WebRTC SIP.js测试</title>
    <!-- 样式 -->
    <link rel="stylesheet" href="index.css">
    <!-- Vue 3 demo使用  -->
    <script src="vue.js"></script>

    <!-- SIP.js -->
    <script src="websip-sipjs.js"></script>
</head>

<body>
    <div id="app">
        <div class="app">
            <div class="header">
                <h1>卓越WebRTC SIP.js 测试demo</h1>
            </div>
            <div class="warning">
                <strong>重要提示:</strong> 首次使用时浏览器会请求麦克风权限，请点击"允许"
            </div>
            <div class="form-section">
                <div class="form-group">
                    <label>FreeSWITCH WebSocket URL:</label>
                    <input v-model="state.wsUrl" class="form-control" type="text">
                </div>
                <div class="form-group">
                    <label>SIP 用户名:</label>
                    <input v-model="state.sipUser" class="form-control" type="text">
                </div>
                <div class="form-group">
                    <label>SIP 密码:</label>
                    <input v-model="state.sipPassword" class="form-control" type="password">
                </div>
                <div class="form-group">
                    <label>域 (Domain):</label>
                    <input v-model="state.domain" class="form-control" type="text">
                </div>
                <div class="form-group">
                    <label>拨打号码:</label>
                    <input v-model="state.targetNumber" class="form-control" type="text"
                        placeholder="输入要拨打的SIP号码 (如 1001)">
                </div>
                <div class="form-group">
                    <label>外显号码 (displayCalledNum):</label>
                    <input v-model="state.displayCalledNum" class="form-control" type="text" placeholder="主叫显示号码">
                </div>
                <div class="form-group">
                    <label>自定义数据 (customData):</label>
                    <input v-model="state.customData" class="form-control" type="text" placeholder="任意字符串，用于CDR记录">
                </div>
                <div class="status"
                    :class="{'registered': state.isRegistered,'unregistered': !state.isRegistered, 'calling': state.isCalling}">
                    {{ statusText }}
                </div>
                <div id="callStatus" class="status" style="display:none;">等待通话</div>
                <div class="btn-group">
                    <div>
                        <template v-if="!state.isRegistered">
                            <button style="margin-right: 6px;" @click="register()" class="btn btn-primary"
                                :disabled="state.isRegistered">
                                注册
                            </button>
                        </template>
                        <template v-if="state.isRegistered">
                            <button @click="unregister()" class="btn btn-primary"
                                style="background-color: brown;margin-right: 6px;"
                                :disabled="state.isCalling">
                                注销
                            </button>
                            <template v-if="!state.isCalling">
                                <button style="margin-right: 6px;" @click="makeCall" class="btn btn-success">
                                    拨打
                                </button>
                            </template>
                            <template v-if="state.isCalling">
                                <button @click="hangupCall" class="btn btn-danger">
                                    挂断
                                </button>
                            </template>
                        </template>
                    </div>
                    <div>
                        <template v-if="state.incomingCaller && !state.isCalling">
                            <button id="answerBtn" @click="answerCall" class="btn btn-blue"
                                style="margin-right: 6px;">接听</button>
                            <button id="rejectBtn" @click="rejectCall" class="btn btn-danger">拒绝</button>
                        </template>
                    </div>

                </div>

                <div v-if="state.error" class="status unregistered">
                    {{ state.error }}
                </div>
            </div>
            <div class="audio-section">
                <div class="audio-controls">
                    <div>
                        <button @click="toggleMute" class="mic-btn" :class="{ muted: state.isMuted }" title="点击切换静音">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
                                <path
                                    d="M12 3c-4.97 0-9 4.03-9 9v7h2v-7c0-3.87 3.13-7 7-7s7 3.13 7 7v7h2v-7c0-4.97-4.03-9-9-9zm-1 13.91V19h2v-2.09c.59-.35 1-.98 1-1.72 0-1.1-.9-2-2-2s-2 .9-2 2c0 .74.41 1.37 1 1.72z" />
                            </svg>
                        </button>
                    </div>
                    <div class="mic-status">
                        <span>静音状态:</span>
                        <span class="status-badge" :class="state.isMuted ? 'status-muted' : 'status-active'">
                            {{ state.isMuted ? '静音' : '激活' }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, reactive, computed, onMounted, onUnmounted } = Vue;
        const app = createApp({
            setup() {
                // 响应式数据
                const state = reactive({
                    wsUrl: 'wss://etc.zy-yun.cn:7443',
                    sipUser: '1003',
                    sipPassword: 'zzzz9999',
                    domain: 'zy-yun.cn',
                    targetNumber: '9196',
                    displayCalledNum: '1003',
                    customData: 'web-sip-demo',
                    // 是否已经注册 true为已注册
                    isRegistered: false,
                    // 是否激活静音, true为静音 , 页面展示使用
                    isMuted: false,
                    isCalling: false, // 是否通话中
                    incomingCaller: null, // 来电号码
                });
                const statusText = computed(() => {
                    if (state.isRegistered) {
                        return '已注册';
                    } else if (state.isCalling) {
                        return '通话中';
                    } else {
                        return '未注册';
                    }
                });
                // 注册SIP
                const register = async () => {
                    // 调用SIP注册函数
                    register_SIP({
                        wsUrl: state.wsUrl,
                        sipUser: state.sipUser,
                        sipPassword: state.sipPassword,
                        domain: state.domain,
                        displayCalledNum: state.displayCalledNum,
                        customData: state.customData,
                    })
                };
                // 注销sip
                const unregister = () => {
                    // 调用SIP注销函数
                    unregister_SIP()
                };
                //拨打
                const makeCall = () => {
                    // 调用SIP拨打电话函数
                    makeCall_SIP({
                        // 呼叫号码
                        targetNumber: state.targetNumber,
                        // 显示呼叫号码
                        displayCalledNum: state.displayCalledNum,
                    })
                };
                //挂断
                const hangupCall = () => {
                    // 调用SIP挂断通话函数
                    hangupCall_SIP()
                };
                // 切换静音
                const toggleMute = () => {
                    state.isMuted = !state.isMuted;
                    // 调用SIP切换静音函数
                    toggleMute_SIP()
                };
                // 接听来电
                const answerCall = () => {
                    // 调用SIP接听来电函数
                    answerCall_SIP()
                };
                // 拒绝来电
                const rejectCall = () => {
                    // 调用SIP拒绝来电函数
                    rejectCall_SIP()
                };
                // 监听注册状态变化
                window.busSIP.on('register_status', (status) => {
                    switch (status) {
                        case SIP.RegistererState.Registered:
                            state.isRegistered = true;
                            console.log(state);
                            console.log('%c✅ 已注册', 'color: green; font-weight: bold; font-size: 14px;');
                            break;
                        case SIP.RegistererState.Unregistered:
                            state.isRegistered = false;
                            console.log('%c❌ 已注销', 'color: red; font-weight: bold; font-size: 14px;');
                            break;
                        case SIP.RegistererState.Registering:
                            console.log("注册中", state);
                            break;
                        case SIP.RegistererState.Unregistering:
                            console.log("注销中", state);
                            break;
                    }
                });
                // 监听通话状态变化
                window.busSIP.on('call_status', (status) => {
                    console.log('%c通话状态:', 'color: blue; font-weight: bold; font-size: 14px;', status.status);
                    switch (status.status) {
                        case 'Initial':
                            console.log('初始化中...');
                            break;
                        case 'Establishing':
                            console.log('建立连接中...');
                            break;
                        case 'Established':
                            console.log('%c✅ 通话已建立', 'color: green; font-weight: bold; font-size: 14px;');
                            state.isCalling = true
                            break;
                        case 'Terminating':
                            console.log('正在结束通话...');
                            break;
                        case 'Terminated':
                            console.log('%c❌ 通话已结束', 'color: red; font-weight: bold; font-size: 14px;');
                            state.isCalling = false
                            state.incomingCaller = null
                            break;
                        case 'incoming':
                            // 来电
                            console.log("caller", status.caller);
                            state.incomingCaller = status.caller;
                            break
                    }
                })
                return {
                    state,
                    statusText,
                    register,
                    unregister,
                    makeCall,
                    hangupCall,
                    toggleMute,
                    answerCall,
                    rejectCall,
                };
            }
        });
        app.mount('#app');
    </script>
</body>

</html>